@use "@/common/styles/colors"

.context-menu
  background-color: colors.$lighter-background
  border: 1px solid colors.$dark-gray
  border-radius: 0.75rem
  padding: 0.375rem
  position: fixed
  z-index: 10000
  min-width: 200px
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3)
  opacity: 0
  transform: scale(0.95) translateY(-8px)
  transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s cubic-bezier(0.4, 0, 0.2, 1)
  pointer-events: none

  &.open
    opacity: 1
    transform: scale(1) translateY(0)
    pointer-events: auto

  &.closed
    opacity: 0
    transform: scale(0.95) translateY(-8px)
    pointer-events: none

  .context-menu-item
    color: colors.$white
    padding: 0.625rem 0.75rem
    cursor: pointer
    transition: background-color 0.1s ease
    border-radius: 0.5rem
    user-select: none
    display: flex
    align-items: center
    gap: 0.75rem
    outline: none
    position: relative
    font-size: 0.9rem

    .menu-icon
      width: 1.125rem
      height: 1.125rem
      flex-shrink: 0
      opacity: 0.9

      svg
        width: 100%
        height: 100%

      img
        width: 100%
        height: 100%
        object-fit: contain

    .menu-label
      flex: 1
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis

    .submenu-arrow
      width: 1rem
      height: 1rem
      margin-left: auto
      flex-shrink: 0
      opacity: 0.5

    &:hover:not(.disabled):not(.custom)
      background-color: colors.$gray

    &:focus-visible
      background-color: colors.$gray
      outline: 2px solid colors.$primary
      outline-offset: -2px

    &.disabled
      opacity: 0.4
      cursor: not-allowed

    &.danger
      color: colors.$error

      .menu-icon
        opacity: 1

      &:hover:not(.disabled)
        background-color: colors.$error-opacity
        color: colors.$error

    &.custom
      padding: 0
      cursor: default

      &:hover
        background-color: transparent

  .context-menu-submenu
    position: absolute
    background-color: colors.$lighter-background
    border: 1px solid colors.$dark-gray
    border-radius: 0.75rem
    padding: 0.375rem
    min-width: 200px
    z-index: 10001
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3)
    animation: submenuFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1)

    .context-menu-item
      white-space: nowrap

  .context-menu-separator
    height: 1px
    background-color: colors.$dark-gray
    margin: 0.375rem 0

@keyframes submenuFadeIn
  from
    opacity: 0
    transform: translateX(-8px) scale(0.96)
  to
    opacity: 1
    transform: translateX(0) scale(1)
